<template>
    <div class="model-profile">
        <normal-title titles="训练参数"></normal-title>
        <el-row class="traning-parameters">
            <el-col :span="6">
                <el-row>算法名称</el-row>
                <el-row>逻辑回归</el-row>
            </el-col>
              <el-col :span="6">
                <el-row>学习率alpha系数</el-row>
                <el-row>.1</el-row>
            </el-col>
              <el-col :span="6">
                <el-row>算法模式</el-row>
                <el-row>逻辑回归</el-row>
            </el-col>
              <el-col :span="6">
                <el-row>最大训练轮数</el-row>
                <el-row>2</el-row>
            </el-col>
        </el-row>
        <normal-title titles="训练过程概要"></normal-title>
        <el-row class="traning-profile">
            <el-col :span="14">
                <el-row class="control-box">
                    <el-col :span="12">
                        <span :class="{'active': choiceLineType == 1}" @click="changeLineType(1)">训练logloss</span>
                    </el-col>
                    <el-col :span="12">
                        <span :class="{'active': choiceLineType == 2}" @click="changeLineType(2)">训练AUC</span>
                    </el-col>
                </el-row>
                <ve-line :data="chartData" :settings="chartSettings" :extend="extendLine" v-if="choiceLineType == 1"></ve-line>
                 <ve-line :data="chartData" :settings="chartSettings" :extend="extendLine" v-else-if="choiceLineType == 2"></ve-line>
            </el-col>
            <el-col :span="10" class="traning-profile-detail-num">
                <template v-for="item in traningProfileArray">
                    <el-row :key="item.value">
                        <el-col :span="12">{{item.label}}</el-col>
                        <el-col :span="12">{{item.value}}</el-col>
                    </el-row>
                </template>
            </el-col>
        </el-row>
        <normal-title titles="训练集概要"></normal-title>
        <template v-for="item in rowDetailList">
                  <little-key-value :key="item.key" :keys="item.key" :values="item.value"></little-key-value>
        </template>
            <el-table :data="tableData" style="width: 100%">
                <template v-for="item in tableColums">
                         <el-table-column
                            :key="item.key"
                            :prop="item.key"
                            :label="item.label"
                            align="center"
                            >
                        </el-table-column>
                </template>
            </el-table>
    </div>
</template>
<script>
import normalTitle from '@/components/NormalTitle'
import littleKeyValue from '@/components/LittleKeyValue'
import { VeLine } from 'v-charts'
export default {
    name: 'ModelProfile', // 模型概要
    components: {
        normalTitle,
        VeLine,
        littleKeyValue
    },
    data () {
        this.extendLine = {
            legend: {
                show: false
            }
        }
        this.chartSettings = {
            metrics: ['访问用户'],
            dimension: ['日期']
        }
        return {
            chartData: {
                columns: ['日期', '访问用户'],
                rows: [
                    { '日期': '1/1', '访问用户': 1393 },
                    { '日期': '1/2', '访问用户': 3530 },
                    { '日期': '1/3', '访问用户': 2923 },
                    { '日期': '1/4', '访问用户': 1723 },
                    { '日期': '1/5', '访问用户': 3792 },
                    { '日期': '1/6', '访问用户': 4593 }
                ]
            },
            traningProfileArray: [
                {
                    label: '训练用时',
                    value: '27ms'
                },
                {
                    label: '训练迭代次数',
                    value: '2'
                },
                {
                    label: '训练AUC',
                    value: '.98'
                },
                {
                    label: '训练logloss',
                    value: '22'
                }
            ],
            tableData: [
                {
                    age: '12',
                    work: '盛开的附件',
                    tnlwgt: 'xxxx',
                    education: '王小虎',
                    occupation: 'sfdsf'
                },
                {
                    age: '12',
                    work: '盛开的附件',
                    tnlwgt: 'xxxx',
                    education: '王小虎',
                    occupation: 'sfdsf'
                },
                {
                    age: '12',
                    work: '盛开的附件',
                    tnlwgt: 'xxxx',
                    education: '王小虎',
                    occupation: 'sfdsf'
                },
                {
                    age: '12',
                    work: '盛开的附件',
                    tnlwgt: 'xxxx',
                    education: '王小虎',
                    occupation: 'sfdsf'
                }
            ],
            tableColums: [
                {
                    key: 'age',
                    label: 'age'
                },
                {
                    key: 'work',
                    label: 'work'
                },
                {
                    key: 'tnlwgt',
                    label: 'age'
                },
                {
                    key: 'education',
                    label: 'education'
                },
                {
                    key: 'occupation',
                    label: 'occupation'
                }
            ],
            rowDetailList: [
                {
                    key: '行数',
                    value: '10'
                },
                {
                    key: '列数',
                    value: '20'
                }
            ],
            choiceLineType: 1
        }
    },
    methods: {
        changeLineType (index) {
            this.choiceLineType = index
        }
    }
}
</script>
<style lang="less">
    .traning-profile{
        background: #F4F5F5;
        .control-box {
            width: 30%;
            margin: 0 auto;
            .el-col {
                box-sizing: border-box;
                text-align:center;
                font-size: 16px;
                color: #464D5F;
                padding-top: 20px;
                span {
                    display: inline-block;
                    box-sizing: border-box;
                    padding-bottom: 5px;
                    width: 100px;
                    text-align: center;
                    border: 2px solid transparent;
                    cursor: pointer;
                    &.active {
                        color: #000000;
                        border-bottom: 2px solid #FF7575;
                    }
                }
            }
        }
        .traning-profile-detail-num {
            box-sizing: border-box;
            padding:100px 10%;
            .el-row{
                margin-bottom: 30px;
                font-size: 14px;
                color: #464D5F;
                .el-col{
                    &:last-child{
                        font-weight: bold;
                    }
                }
            }
        }

    }
     .traning-parameters {
            border-top: 1px solid #CAD3DC;
            border-left: 1px solid #CAD3DC;
            .el-col{
                .el-row{
                    border-right: 1px solid #CAD3DC;
                    border-bottom: 1px solid #CAD3DC;
                    height: 42px;
                    line-height: 42px;
                    text-align: center;
                    &:first-child {
                        background: #ECF4F9;
                    }
                }
            }
     }
</style>
